<template>
  <!-- 商铺信息页 -->
  <div class="rating_page">
    <head-top :head-title="name" go-back="true"></head-top>
    <section class="header_img">
      <img :src="imgBaseUrl + image_path" class="food_img">
      <div class="cover"></div>
    </section>
    <p class="description">{{description}}</p>
    <section class="detail_container">
      <section class="detail_left">
        <p>{{name}}</p>
        <div class="rating_sale">
          <span>评分</span>
          <rating-star :rating="rating"></rating-star>
          <span>{{parseInt(rating).toFixed(1)}}</span>
        </div>
        <p>
          <span>月售{{month_sales}}单</span>
          <span>售价￥{{foods.specfoods[0].price}}</span>
          <span v-if="foods.specfoods.length">起</span>
        </p>
        <p>
          <span>评论数{{rating_count}}</span>
          <span>好评率{{satisfy_rate}}%</span>
        </p>
      </section>
    </section>
  </div>
</template>

<script>
import headTop from '@/components/header/head.vue'
import ratingStar from '@/components/common/ratingStar.vue'
// import buyCart from '@/components/common/buyCart.vue'
import { imgBaseUrl } from '@/config/env';
import { getImgPath } from '@/components/common/mixin'
export default {
  name: 'FoodDetail',
  data () {
    return {
      image_path: null,
      description: null,
      month_sales: null,
      name: null,
      rating: null,
      rating_count: null,
      satisfy_rate: null,
      foods: null,
      shopId: null,
      imgBaseUrl,
    }
  },
  components:{
    headTop,
    ratingStar,
  },
  created() {
    this.image_path = this.$route.query.image_path
    this.description = this.$route.query.description
    this.month_sales = this.$route.query.month_sales
    this.name = this.$route.query.name
    this.rating = this.$route.query.rating
    this.rating_count = this.$route.query.rating_count
    this.satisfy_rate = this.$route.query.satisfy_rate
    this.foods = this.$route.query.foods
    this.shopId = this.$route.query.shopId
  },
  mixins: [getImgPath],
}
</script>

<style lang="scss" scoped>
 @import '@/style/mixin.scss';
 .rating_page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 12;
  padding-top: 1.95rem;
  p,span {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
 }
 .header_img {
  position: relative;
  .food_img {
    width: 100%;
    display: block;
  }
  .cover {
    position: absolute;
    @include wh(100%, 100%);
    top: 0;
    left: 0;
  }
 }
 .description{ 
  @include sc(.6rem, #666);
  margin-top: 0.5rem;
  line-height: 0.8rem;
  bottom: 0.2rem;
  padding: 0 0.4rem;
 }
 .detail_container {
  padding: 0.5rem;
  @include fj;
  align-items: center;
  .detail_left {
    p:nth-of-type(1) {
      @include sc(0.7rem, #333);
      margin-bottom: 0.2rem;
    }
    .rating_sale {
      display: flex;
      align-items: center;
      span:nth-of-type(1) {
        @include sc(0.6rem, #666);
        margin-right: 0.2rem;
      }
      span:nth-of-type(2) {
        @include sc(0.55rem, #f60);
        margin-left: 0.2rem;
      }
      span:nth-of-type(3) {
        @include sc(0.6rem, #666);
        margin-left: 0.4rem;
      }
    }
    p:nth-of-type(2) {
      font-size: 0;
      margin-top: 0.3rem;
      span:nth-of-type(1) {
        @include sc(0.6rem, #666);
        margin-right: 0.4rem;
      }
      span:nth-of-type(2) {
        @include sc(0.6rem, #f60);
        margin-right: 0.2rem;
      }
    }
    p:nth-of-type(3) {
      span {
        @include sc(0.6rem , #666);
      }
    }
  }
 }
</style>